<template>
  <div class="box">
    <p
      class="show_menu"
    ><span @click="Mail_list" style="color: #1989fa;">通讯录</span>
      <span
        v-for="(li,i) in arr"
        :key="i"
      ><span @click="showlist(li)"> > {{li}}</span></span></p>
    <van-checkbox
      icon-size="24px"
      v-model="isCheckAll"
      @click="checkAll()"
    ><span>全选</span></van-checkbox>
    <!-- @click="checkAll" -->
    <div style="height:10px;background:#F7F8FA"></div>
    <div
      style="height:75vh;overflow:scroll;"
      v-show="people"
    >
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
      >
      <div class="ellipsis">
        <div
          style="position:relative;"
          v-for="(item,i) in depart"
          :key="i+'ll'"
        >

          <van-checkbox
            icon-size="24px"
            :name="item.dingding_id"
            ref="data_checked"
            @click="showEverybody(item,$event)"
          >{{item.name}}(<span>{{item.userNumber}}</span>人)
          </van-checkbox>

          <span
            class="right"
            ref="next"
            @click="showPersonnel(item)"
          >下级</span>
        </div>
        </div>
      </van-checkbox-group>
    </div>
    <div
      style="margin-top:15vh"
      v-show="show_time"
    >
      <van-icon
        :style="{fontSize:'80px',color:'#bbbcbc'}"
        name="friends"
      /><br />
      <i style="font-size:18px;font-style:normal">暂无部门</i>
    </div>
    <van-cell
      center
      class="btn"
      :title="'已选择：'+Total_num+'部门'"
    >
      <van-button
        round
        size="small"
        type="info"
        @click="show_Determine"
      >确定</van-button>
    </van-cell>
    <!-- </van-popup> -->
  </div>
</template>

<script type="text/javascript">
import {
  Search,
  Checkbox,
  CheckboxGroup,
  Button,
  Cell,
  Toast,
  Icon
} from "vant";
export default {
  name: "personnel",
  data() {
    return {
      value: "",
      result: [],
      isCheckAll: false,
      people: true,
      depart: [],
      userArr: [],
      arr: [],
      Total_num: 0,
      item_list: [],
      personal_list: [],
      checksListOn: [],
      checkList: [],
      result_str: "",
      show_time: false
    };
  },
  components: {
    [Search.name]: Search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Icon.name]: Icon
  },
  created() {
    this.showDepart();
    dd.biz.navigation.setTitle({
      title: "招募范围" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    // 确定按钮
    show_Determine() {
      if (this.Total_num > 20) {
        this.$toast("最多可选20人");
      } else {
        this.Total_num = this.result.length;
        this.$emit("toParentres", this.result);
      }
    },
    // 通讯录
    Mail_list() {
      this.people = true;
      this.show_time = false;
      this.arr = [];
      this.depart =[];
      this.userArr = [];
      this.showDepart();
      let i_cheked = this.$refs.data_checked;
    },
    // 部门选择
    showEverybody(it, $event) {
      this.checksListOn.push(it);
      let index = this.checksListOn.indexOf(it);
      if (index <= -1) {
        this.checksListOn.push(it);
      } else {
        this.checksListOn.splice(index, 1);
      }
    },
    showlist(li) {
      let depart_list = this.item_list;
      let arr_list = this.arr;

      $.each(depart_list, (i, val) => {
        if (li == val.name) {
          this.people = true;
          this.show_time = false;
          this.arr = arr_list.splice(0, i + 1);
          if (val.son_dept != undefined) {
            this.depart = val.son_dept;
          }
        }
      });
    },
    // 下级
    showPersonnel(item) {
      this.item_list.push(item);
      this.arr.push(item.name);
      if (item.son_dept != undefined) {
        this.depart = item.son_dept;
        this.people = true;
        this.show_time = false;
      } else {
        this.show_time = true;
        this.people = false;
      }
    },
    // 人员显示ding8f30b8b37b1b4421
    async showDepart() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/dept?corpId=${corpId}&type=1`
      );
      const { son_dept, userList } = res.data.data;
      if (son_dept.son_dept && son_dept.userList) {
        const errcode = res.data;
        for (let i = 0; i < son_dept.length; i++) {
          son_dept[i]["ischecked"] = false;
        }
        if (errcode !== "1005") {
          this.$forceUpdate();
          this.depart.push(son_dept);
          this.userArr = userList;
        } else {
          this.depart = [];
          this.userArr = [];
        }
      } else if (son_dept.userList) {
        const errcode = res.data;
        if (errcode !== "1005") {
          this.$forceUpdate();
          this.depart.push(son_dept);
          this.userArr = userList;
        } else {
          this.depart = [];
          this.userArr = [];
        }
      } else {
        const errcode = res.data;
        for (let i = 0; i < son_dept.length; i++) {
          son_dept[i]["ischecked"] = false;
        }
        if (errcode !== "1005") {
          this.$forceUpdate();
          this.depart = son_dept;
          this.userArr = userList;
        } else {
          this.depart = [];
          this.userArr = [];
        }
      }
    },
    // 全选
    checkAll() {
      if (!this.isCheckAll) {
        let user_list = this.depart;
        let num = 0;
        let Total_num = 0;
        let str = "";
        let user_id = this.userArr;
        if (this.people == false) {
          Total_num = this.userArr.length;
          for (let j = 0; j < user_id.length; j++) {
            str += `${user_id[j].dd_id},`;
          }
        } else {
          let arr = [];
          let arrstr = "";
          let user_str = "";
          for (let i = 0; i < user_list.length; i++) {
            num += user_list[i].userList.length;
            arr = user_list[i].userList;
            for (let k = 0; k < arr.length; k++) {
              arrstr += `${arr[k].dd_id},`;
            }
          }
          for (let t = 0; t < user_id.length; t++) {
            user_str += `${user_id[t].dd_id},`;
          }
          str = '"' + arrstr + user_str + '"';
          Total_num = num + this.userArr.length;
        }
        this.Total_num = Total_num;
        this.result_str = str;
        this.isCheckAll = true;
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
        this.Total_num = 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding: 18px 0px;
  padding-bottom: env(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  .btn {
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .show_menu {
    
    text-align: left;
    background: #fff;
    padding: 10px;
    margin: 0px;
    overflow-x: scroll;
    white-space: nowrap;
    font-size: 16px;
  }
  .van-icon__checked::before {
    content: "\F0C8";
  }
  /deep/ .van-cell__title {
    text-align: left;
  }
  .ellipsis{
    width:100%;
  }
  /deep/ .van-checkbox-group,.van-checkbox {
      background: #fff;
      /deep/.van-checkbox__label{
      text-align: left;
      width: 40%;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .personnel_text{
          text-align: center;
        }
}
    }
  /deep/ .van-checkbox {
    padding: 10px;
    border-bottom: 1px solid rgb(230, 227, 227);
  }
  .van-cell--center {
    position: fixed;
    bottom: 0px;
  }
  .personnel_text {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #59d1ff;
    font-size: 14px;
    line-height: 42px;
    color: #fff;
  }
}
.left {
  float: left;
}
.right {
  float: right;
  font-size: 14px;
  color: #1989fa;
  border-left: 1px solid silver;
  padding-left: 5px;
  position: absolute;
  top: 12px;
  right: 12px;
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}

</style>
